{% extends 'base.html' %}


{% load humanize %}

{% block title %}
    {{ player.name }}
{% endblock %}

{% block content %}
<section id="showcase-inner" class="py-5 text-white">
    <div class="container">
      <div class="row text-center">
        <div class="col-md-12">
          <h1 class="display-4">{{ player.name }}</h1>
        </div>
      </div>
    </div>
  </section>

  <!-- Breadcrumb -->
  <section id="bc" class="mt-3">
    <div class="container">
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="{% url 'index' %}">Home</a>
          </li>
          <li class="breadcrumb-item">
            <a href="{% url 'players' %}">Players</a>
          </li>
          <li class="breadcrumb-item active">{{ player.name }}</li>
        </ol>
      </nav>
    </div>
  </section>

  {% include 'partials/_alerts.html' %}

  <!-- player -->
  <section id="player" class="py-4">
    <div class="container">
      <a href="{% url 'players' %}" class="btn btn-light mb-4">Back To Listings</a>
      <div class="row">
        <div class="col-md-9">
          <!-- Home Main Image -->
          <img src="{{ player.photo_main.url }}" alt="" class="img-main img-fluid mb-3">
          <!-- Fields -->
          <div class="row mb-5 fields">
            <div class="col-md-6">
              <ul class="list-group list-group-flush">
                <li class="list-group-item text-secondary"> Name:
                  <span class="float-right">{{ player.name }}</span>
                </li>
                <li class="list-group-item text-secondary"> Team:
                  <span class="float-right">{{ player.team }}</span>
                </li>
                <li class="list-group-item text-secondary"> Score:
                  <span class="float-right">{{ player.score }}</span>
                </li>
              </ul>
            </div>
            <div class="col-md-6">
              <ul class="list-group list-group-flush">
                <li class="list-group-item text-secondary"> FG percent:{{ player.percentage }}%
                  <span class="float-right">{{ player.hit}} / {{ player.shoot }}</span>
                </li>
                <li class="list-group-item text-secondary"> Three pt percentage:{{ player.threepercentage }}%
                  <span class="float-right">{{ player.threehit}} / {{ player.threeshoot }}</span>                 
                </li>
                <li class="list-group-item text-secondary"> Assists:
                  <span class="float-right">{{ player.assists }}
                  </span>
                </li>
              </ul>
            </div>
          </div>
          </div> 
        </div>
        </div>      
  </section>

  <!-- Inquiry Modal -->
  <div class="modal fade" id="inquiryModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="inquiryModalLabel">Make An Inquiry</h5>
          <button type="button" class="close" data-dismiss="modal">
            <span>&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form action="{% url 'contact' %}" method="POST">
            {% csrf_token %}
            {% if user.is_authenticated %}
              <input type="hidden" name="user_id" value="{{ user.id }}">
            {% else %}
            <input type="hidden" name="user_id" value="0">
            {% endif %}
            <input type="hidden" name="realtor_email" value="{{ player.realtor.email }}">
            <input type="hidden" name="player_id" value="{{ player.id }}">
            <div class="form-group">
              <label for="property_name" class="col-form-label">Property:</label>
              <input type="text" name="player" class="form-control" value="{{ player.name }}">
            </div>
            <div class="form-group">
              <label for="name" class="col-form-label">Name:</label>
              <input type="text" name="name" class="form-control" {% if user.is_authenticated %} value="{{ user.username }}" {% endif %} required>
            </div>
            <div class="form-group">
              <label for="email" class="col-form-label">Email:</label>
              <input type="email" name="email" class="form-control" {% if user.is_authenticated %} value="{{ user.email }}" {% endif %} required>
            </div>
            <div class="form-group">
              <label for="message" class="col-form-label">Comment:</label>
              <textarea name="message" class="form-control"></textarea>
            </div>
            <hr>
            <input type="submit" value="Send" class="btn btn-block btn-secondary">
          </form>
        </div>
      </div>
    </div>
  </div>

  <div>
    <div class="row" style="margin: auto;">
      <h3 style="margin-left: 120px;">Comments</h3>
  </div>
  <div >
    <div class="col-md-12">
  <button style="border-style:none; margin-left: 150px;" data-toggle="modal" data-target="#inquiryModal">Make An Inquiry</button>
</div>
  </div>
        <div class="smart-green"> 
          {% if contacts %}
          {% for contact in contacts %}
          <a class="author" style="font-size: 30px; color: #000;"><b>{{ contact.name }}</b></a>
          <div class="metadata">
          <div class="text" style="font-size: 20px;">{{ contact.message }}</div>
          <div style="text-align:right;"><span class="date" style="font-size: 10px;">{{ contact.contact_date }}</span></div>
          <HR>
          {% endfor %}
          {% endif %}
        </div>
    </div>
  </div>
  


{% endblock %}